<template>
  <a-select
    :value="value"
    style="minWidth: 130px"
    :placeholder="placeholder"
    allow-clear
    :max-tag-count="maxTagCount"
    :mode="mode"
    @change="changeValueHandler"
  >
    <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
    <a-select-option v-for="selectItem in dataSourceF" :key="selectItem.id" :value="selectItem.name">
      {{ selectItem.name }}
    </a-select-option>
  </a-select>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {

  model: {
    prop: 'value',
    event: 'changeValueHandler'
  },
  props: {
    placeholder: {
      type: String,
      default: '报告类型'
    },
    mode: {
      type: String,
      default: 'default'
    },
    value: {
      type: [Array, String],
      default: () => []
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    valueKey: {
      type: String,
      default: 'name'
    },
    nameKey: {
      type: String,
      default: 'name'
    },
    maxTagCount: {
      type: Number,
      default: 1
    }
  },
  computed: {
    ...mapState('fraMonitoring', [
      'repReportType'
    ]),
    dataSourceF() {
      let d = this.repReportType;
      if (this.dataSource.length > 0) {
        d = this.dataSource;
      }
      return d;
    }
  },

  watch: {
    value(nv, ov) {
      this.$emit('changeValueHandler', nv);
    }
  },
  mounted() {
    this.getRepType();
  },
  methods: {
    ...mapActions('fraMonitoring', [
      'getRepType'
    ]),
    changeValueHandler(nv) {
      this.$emit('changeValueHandler', nv);
    }
  }

};
</script>

<style>

</style>
